@import "./animation.scss";


page{
	height: 100%;
	color: $base-text-color;
	font-size: $base-font-size;
	background-color: #f5f5f5;

}
::-webkit-scrollbar {
	display: none;
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	-webkit-appearance: none;
	color: transparent;
	display: none;
}
.page-container{
	min-height: 100vh;
	background-color: #fff;
	overflow-x: hidden;
}
view,text{
	box-sizing: border-box
}
.text-line {
	text-decoration: line-thro ugh;
}
.red {
	color: #ff4949;
}
.di-c {
	display: inline-block;
	vertical-align: middle;
}
.df-sbc {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.df-sbs {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.df-sbe {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.df-cc {
	display: flex;
	justify-content: center;
	align-items: center;
}
.df-sc {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.df-ss {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.df-se {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}
.df-ec {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
// 定义字体(px)单位，小于20都为px单位字体
@for $i from 9 to 19 {
	.ft-#{$i} {
		font-size: $i + px;
	}
}

// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
@for $i from 20 through 40 {
	.ft-#{$i} {
		font-size: $i + rpx;
	}
}

/* start--文本行数限制--start */
.line-1 {
	overflow: hidden;
	white-space: nowrap !important;
	text-overflow: ellipsis;
}

.line-2 {
	-webkit-line-clamp: 2;
}

.line-3 {
	-webkit-line-clamp: 3;
}

.line-4 {
	-webkit-line-clamp: 4;
}

.line-5 {
	-webkit-line-clamp: 5;
}

.line-2,
.line-3,
.line-4,
.line-5 {
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box; // 弹性伸缩盒
	-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

/* end--文本行数限制--end */

/* start--去除button的所有默认样式--start */
.sun-reset-button {
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
	margin-left: 0;
	border-radius: 0;
	margin-right: 0;
}
.sun-reset-button::after{
	border: none !important;
}
// 历遍生成4个方向的底部安全区
@each $d in top, right, bottom, left {
	.safe-area-inset-#{$d} {
		padding-#{$d}: 0;
		padding-#{$d}: constant(safe-area-inset-#{$d});
		padding-#{$d}: env(safe-area-inset-#{$d});
	}
}
.text-primary{
	color: $base-color;
}
.text-less-color-1{
	color: $less-text-color1;
}
.text-less-color-2{
	color: $less-text-color2;
}
.text-red{
	color: $base-error-color;
}

.text-less-size{
	font-size: $less-font-size;
}
.text-other-size{
	font-size: $other-font-size;
}
.placeholder-class{
	color: #cccccc;
}
.text-arrow{
	color: #B4B4B4;
}
.text-color-base{
	color: $base-light-color;
}
.bg-base{
	background-color: $base-color;
}

.bg-image{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}
.footer-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  .footer {
    width: 750rpx;
    height: 110rpx;
    background: #ffffff;
    .btn {
      width: 702rpx;
      height: 88rpx;
      background: #9337F4;
      border-radius: 50rpx;
      color: #fff;
      font-size: 30rpx;
	  letter-spacing: 5rpx;
    }
  }
}

.round-btn{
      width: 702rpx;
	  height: 88rpx;
	  background: #9337F4;
	  border-radius: 50rpx;
	  color: #fff;
	  font-size: 30rpx;
	  letter-spacing: 5rpx;
}

.no-scrollbar ::-webkit-scrollbar {
	display: none;
}

.no-scrollbar ::-webkit-scrollbar {
	width: 0;
	height: 0;
	-webkit-appearance: none;
	color: transparent;
	display: none;
}
.common-title{
	font-size: 36rpx;
	display: flex;
	align-items: center;
	font-weight: bold;
	&:before{
		content: '';
		width: 8rpx;
		height: 30rpx;
		background: #49CDFD;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}
}
scroll-view {
	box-sizing: border-box;
}


.KzLive {
	width: 10%;
	height: 50%;
	position: relative;
	--color: white;
	background-color: var(--color);
	transform-origin: bottom;
	animation: KzLive 0.6s 0.2s infinite ease-in-out;
}

.KzLive::after {
	right: 200%;
	animation: KzLive 0.6s 0.4s infinite ease-in-out;
}

.KzLive::before {
	left: 200%;
	animation: KzLive 0.6s 0s infinite ease-in-out;
}

.KzLive::after,
.KzLive::before {
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	bottom: 0;
	background-color: var(--color);
	transform-origin: bottom;
}

@keyframes KzLive {

	0%,
	100% {
		transform: scaleY(1);
	}

	50% {
		transform: scaleY(0.6);
	}
}

.KzPortrait {
	position: relative;
	--color: #ff9f89;
}

.KzPortrait::after,
.KzPortrait::before {
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	box-sizing: border-box;
	border: 2rpx solid var(--color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

.KzPortrait::after {
	transform: scale(1.1);
	animation: KzPortrait 0.8s linear infinite;
}

@keyframes KzPortrait {

	0%,
	100% {
		transform: scale(1);
		opacity: 0;
	}

	1% {
		transform: scale(1);
		opacity: 1;
	}

	95% {
		transform: scale(1.3);
		opacity: 0;
	}
}
@keyframes KzBeat {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.8);
	}

	100% {
		transform: scale(1);
	}
}

.KzBeat {
	animation: KzBeat 0.8s linear infinite;
}

navigator{
	box-sizing: border-box;
}

.release-popup .u-drawer-bottom{
	background: transparent !important;
}
image {
	will-change: transform;//解决加载时瞬间拉伸问题
	width: auto;
	height: auto;
	image-rendering:-moz-crisp-edges;
	image-rendering:-o-crisp-edges;
	image-rendering:-webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode:nearest-neighbor;
}
.plr30{
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.plr-10{
	padding-left: 10rpx;
	padding-right: 10rpx;
}
.box-shadow {
  box-shadow: 4rpx 4rpx 8rpx 0rpx #ededed,
    -4rpx -4rpx 8rpx 0rpx rgba(237, 237, 237, 0.5);
}
